import React from 'react';
import { TextInput, StyleSheet, TextStyle, TextInputProps, StyleProp } from 'react-native';
import { useTheme } from './theme/ThemeContext';

interface ThemedInputProps extends TextInputProps {
  style?: StyleProp<TextStyle>;
  inputStyle?: StyleProp<TextStyle>;
}

export function ThemedInput({
  style,
  inputStyle,
  ...props
}: ThemedInputProps) {
  const { theme } = useTheme();

  return (
    <TextInput
      style={[
        styles.input,
        {
          backgroundColor: theme.colors.background,
          color: theme.colors.text,
          borderColor: theme.colors.border,
        },
        style,
        inputStyle,
      ]}
      placeholderTextColor={theme.colors.placeholder}
      {...props}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 16,
    fontSize: 16,
  },
}); 